前言

終於終於終於要開始進入DOM了！今天先來聊聊有關瀏覽器渲染流程及認識一下DOM Tree吧。

瀏覽器渲染過程

當輸入新網址或重新整理網頁，瀏覽器會先進行解析HTML和CSS的檔案，並針對兩個檔案各自建立DOM和CSSOM物件模型，接著將兩個物件模型合併成Render Tree(瀏覽器繪製結果到螢幕的必備要素)，瀏覽器針對每個元素佈局繪製出最終我們看到的每個網頁。

前面提到建立DOM的過程，也同時是JS可以介入的時候，我們可以趁這個時候增加、更動或修改HTML/CSS的內容。但要注意的是，由於瀏覽器渲染的過程會先解析HTML，建立DOM後再讀取JS來調整DOM，在撰寫程式碼時也會將這個流程套入至擺放順序，所以基本上script標籤會放置於body架構的最後面。

DOM Tree

DOM採樹狀結構來儲存網頁元素，這種結構有明確的父子階層關係，因此可以按照其相對關係來進行查找需要的資料。在DOM裡面的每個成員(網頁裡所有內容都是DOM的成員)被稱作節點，節點主要分為四個類型：元素、文字、屬性及註解節點，目前我比較常接觸到的是元素及文字節點。

DOM的結構中有所謂的根節點，其代表的是網頁本身，也就是document，運用開發者工具輸入document可以直接取得HTML文件內容，而document雖然叫做根節點，但其實還有上層的window，也就是視窗，被稱作瀏覽器物件模型(BOM)，當在開發者工具輸入window會發現跑出來的內容完全不一樣，會得到一個看起來是物件且展開後有一堆屬性和方法的內容。

由於window為全域物件，它同樣不會受到作用域限制，所以有的時候使用上會不小心把this指向了winsow物件，可能就沒有辦法得到自己想取得的結果，這個部份在實作上要多留意。